<style lang="scss" scoped="">
  @import '../style.scss';


</style>
<template>
  <div class='my_card_outer' style="height:25vh">
    <div class='my_card' style="height:24vh;" >
      <div class="my_card_title">
        <Icon type="md-stats"  color='rgb(67,158,279)' class="my_card_icon"/>租户健康度详情
      </div>
      <div style="height:19vh" ref="myEchart">
        
      </div>
    </div>

  </div>

</template>

<script>
  import echarts from 'echarts'

  export default {
    name:'tenant_detail_score',
    mounted() {
      this.initChart();

    },
    methods:{
      initChart(){
        let hv=document.body.clientHeight/100;
        var myChart= echarts.init(this.$refs.myEchart);
				let data=[70,78,87]
				
				var option=getOption();
				option.series[0]['data']=data;
        myChart.setOption(option, true);
      }
    },
		
  }
	
	
	function getOption(){
		let hv = document.body.clientHeight / 100;
		var option = {
		  tooltip : {
		    trigger: 'axis',
		    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		      type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		    }
		  },
		
		  grid: {
		    show:false,
		    left: '3%',
		    right: '4%',
		    bottom: '2%',
		    top:'4%',
		    containLabel: true
		  },
		  xAxis : [
		    {
		      type : 'category',
					
					data : ['健康度','客观评分','专家评分'],
					axisLabel:{
					  color:"#FFF",
					  fontSize:hv*1.5
					},
		    }
		  ],
		  yAxis : [
		    {
		      type : 'value',
		      axisTick : {show: false},
		      splitLine:false,
					axisLabel:{
						color:'#FFF',
						fontSize:1.5*hv
					},
					axisLine:{
						lineStyle:{
							color:'#FFF'
						}
					}
		      
		    }
		  ],
		  series : [
		    {
		      name:'评分',
		      type:'bar',
					stack: 'barbar',
		      
					itemStyle:{
						color:'rgb(67,158,279)'
					},
					barWidth:'30%',
		      data:[86, 67, 87,87,80]
		    }
		  ]
		};
		return option;
		
	}
</script>

